html,body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #a6e1ec;
}
#ui-view {
    width: 100%;
    height: 100%;
}
.firstPage{
    width: 100%;
    height: 100%;
    text-align: center;
    color: white;
}
#title{
    opacity: 0;
    animation-delay: .3s;
}
#icon_mid{
    opacity: 0;
    animation-delay: .6s;
}
#begin_btn{
    opacity: 0;
    animation-delay: .9s;
}
.marginTop{
    margin-top: .5rem;
}
.marginBottom{
    margin: .5rem;
}
.marginBottomPure{
    margin-bottom:.5rem; 
}
.question,.statistics,.resultPage{
    width: 100%;
    height: 100%;
    background-color: 	#F0F0F0;
    overflow: auto;
}
.options{
    font-size: .3rem;
    padding-left: .5rem;
    margin: .1rem;
    height:.6rem;
    line-height:0.4rem;
}
.optionsInput{
    margin-top:.2rem; 
    margin-bottom: .4rem;
}
.layer{
    position: fixed;
    bottom: 0;
    width: 100%;
    opacity: 0;
    filter: alpha(opacity(0));
}
.title{
    background-color: #a6e1ec;
    color: white;
    position: fixed;
    display: block;
    z-index: 10;
}
.title2{
    background-color: #a6e1ec;
    color: white;
    position: fixed;
    display: block;
}
label{
     font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
     font-weight: normal;
}
.subject{
    border: 0.01rem solid #9d9d9d;
    border-radius: .1rem;
    background-color: white;
    margin: .3rem;
}
.border_bottom{
    border-bottom: 0.01rem solid #9d9d9d;
}
#question_1,#question_2,#question_3,#question_4,#question_5{
    opacity: 0;
}
#question_1{
    animation-delay: 0.3s;
    margin-top: 2rem;
}
#question_2{
    animation-delay: 0.6s;
}
#question_3{
    animation-delay: 0.9s;
}
#question_4{
    animation-delay: 1.2s;
}
#question_5{
    animation-delay: 1.5s;
}
#submitContainer{
    animation-delay: 1.8s;
}
.flow{
    width: .2rem;
    height: .2rem;
    display: inline-block;
    background-color: #FF7F00;
}
.lostFlow{
    width: .2rem;
    height: .2rem;
    display: inline-block;
    background-color: #3e97eb;
}
.padding-none{
    padding:0;
}
#statisticsContainer,#resultTem{
    animation-delay: 0.5s;
    margin-top: 2rem;
}
#resultTem{
    padding: .2rem;
    animation-delay: 0.5s;
    font-size: 0.3rem;
    z-index: -1;
}
svg {
    width: 1.5rem; height: 1.5rem;
    transform: rotate(-90deg);
    background: #FF7F00;
    border-radius: 50%;
}
circle {
    fill: #FF7F00;
    stroke: #3e97eb;
    stroke-width: 32;
}
#mcover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255, 0.7);
    display: none;
    z-index: 20000;
}
#mcover img {
    position: fixed;
    right: 5px;
    top: 5px;
    width: 200px;
    height: 180px;
    z-index: 999;
}



/*skills Bar start*/
.skillbar {
    position:relative;
    display:block;
    margin-bottom:15px;
    width:100%;
    background:#eee;
    height:20px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    -webkit-transition:0.4s linear;
    -moz-transition:0.4s linear;
    -ms-transition:0.4s linear;
    -o-transition:0.4s linear;
    transition:0.4s linear;
    -webkit-transition-property:width, background-color;
    -moz-transition-property:width, background-color;
    -ms-transition-property:width, background-color;
    -o-transition-property:width, background-color;
    transition-property:width, background-color;
}

.skillbar-title {
    position:absolute;
    top:0;
    right:0;
    width:110px;
    font-weight:bold;
    font-size:13px;
    color:#ffffff;
    background:#6adcfa;
    -webkit-border-top-left-radius:3px;
    -webkit-border-bottom-left-radius:4px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-bottomleft:3px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.skillbar-title span {
    display:block;
    background:rgba(0, 0, 0, 0.1);
    padding:0 20px;
    height:20px;
    line-height:20px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-bottomleft:3px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.skillbar-bar {
    height:20px;
    width:0px;
    background:#6adcfa;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

.skill-bar-percent {
    position:absolute;
    right:10px;
    top:0;
    font-size:11px;
    height:20px;
    line-height:20px;
    color:#ffffff;
    color:rgba(0, 0, 0, 0.4);
}
/*skills bar end*/

/*music style start*/
.music {
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: .5rem;
    right: 0.4rem;
    background: url(../audio/music.svg) no-repeat;
    background-size: 100% 100%;
    z-index: 111;
    opacity: 1;
    filter: alpha(opacity=100);
}

.musicCur {
    -webkit-animation: move 1s infinite linear both;
    animation: move 1s infinite linear both;
}

@-webkit-keyframes move {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes move {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
/*music style end*/

/*animate start*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        -ms-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes bounceIn {
    0%, 100%, 20%, 40%, 60%, 80% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes bounceIn {
    0%, 100%, 20%, 40%, 60%, 80% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        -ms-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -ms-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        -ms-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        -ms-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        -ms-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        -ms-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

/*animation end*/